<route lang="json5" type="page">
{
  type: 'page',
  needLogin: true,
  style: {
    navigationBarTitleText: '个人信息',
    navigationBarBackgroundColor: '#FFFFFF',  
  }, 
}
</route>
<template>
  <view class="card mx-2 pa-2 pb-0">
    <image class="avatar" src="/static/icon/avatar.svg" />
    <view class="flex items-center px-2 py-3">
      <view class="text-sm flex-1">账户名</view>
      <!-- readonly / disabled -->
      <wd-input v-model="form.username" readonly no-border align-right />
    </view>
    <view class="custom-drivider"></view>
    <view class="flex items-center px-2 py-3">
      <view class="text-sm flex-1">用户类型</view>
      <wd-input v-model="form.type" readonly no-border align-right />
    </view>
    <view class="custom-drivider"></view>
    <view class="flex items-center px-2 py-3">
      <view class="text-sm flex-1">手机号</view>
      <wd-input v-model="form.phone" readonly no-border align-right placeholder="请输入" />
    </view>
    <view class="custom-drivider"></view>
    <view class="flex items-center px-2 py-3">
      <view class="text-sm flex-1">名称</view>
      <wd-input v-model="form.name" readonly no-border align-right placeholder="请输入" />
    </view>
  </view>
  <view class="card ma-2 px-2">
    <view class="flex items-center px-2 py-3">
      <view class="text-sm flex-1">注册时间</view>
      <wd-input v-model="form.createTime" readonly no-border align-right placeholder="请输入" />
    </view>
  </view>
</template>

<script lang="ts" setup>
const form = ref({
  username: 'admin',
  type: '管理员',
  phone: '12345678901',
  name: '张三',
  createTime: '2022-01-01',
})
</script>

<style lang="scss">
page {
  background: #f4f4f4;
  min-height: 100%;
  padding-top: 16rpx;
}
.card {
  background: #fff;
  border-radius: 12rpx;
}
.avatar {
  margin: 20rpx auto;
  display: block;
  width: 104rpx;
  height: 104rpx;
  border-radius: 50%;
}
.custom-drivider {
  height: 1rpx;
  margin: 0 16rpx;
  background: #E5E5E5;
}
</style>

